<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  body{
    background-color: aquamarine;
  }
  .pink{
    background-color: pink;
  }
  .blue{
    background-color: blue;
  }
</style>
<body onclick="bodyClick()">
  <div class="pink" onclick="pinkClick()">
    <h2 class="blue" onclick="buleClick()">一、是什么</h2>
    <div>事件代理，俗地来讲，就是把一个元素响应事件（click、keydown......）的函数委托到另一个元素</div>
    <br>
    <div>事件委托，子级的事件委托给父级来处理</div>
    <br>
    <div>当事件响应到目标元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数</div>
    <br>
    <div>前面讲到，事件流的都会经过三个阶段：捕获阶段 -> 目标阶段 -> 冒泡阶段，而事件委托就是在冒泡阶段完成</div>
  </div>
  <script>

    // 事件代理
    // 默认事件在冒泡阶段触发
    // vue中的循环，我们给item添加了事件（列表查看）是不是不好？绑在item外边的盒子上是不是更不占内存，更优呢？
    // 在实际开发中你遇到过那些场景是需要给父级盒子绑定事件同时也给子级绑定事件的？
    // 注意，默认情况下，vant 的弹框就是插入到我们写的位置的，不像element的弹框是插入到body的。
    // @click.stop 阻止冒泡。
    function bodyClick(){
      console.log('body');
    }
    function pinkClick(){
      console.log('pink');
    }
    function buleClick(){
      console.log('blue');
    }
  </script>
  <div>
    <h2>二、应用场景</h2>
    <div>如果我们有一个列表，列表之中有大量的列表项，我们需要在点击列表项的时候响应一个事件</div>
    <br>
    <div>如果给每个列表项一一都绑定一个函数，那对于内存消耗是非常大的</div>
    <br>
    <div>这时候就可以事件委托，把点击事件绑定在父级元素ul上面，然后执行事件的时候再去匹配目标元素（e.target）</div>
  </div>

  <div>
    <h2>三、总结</h2>
    <div>适合事件委托的事件有：click，mousedown，mouseup，keydown，keyup，keypress</div>
    <br>
    <div>事件委托存在两大优点</div>
    <ul>
      <li>减少整个页面所需的内存，提升整体性能</li>
      <li>动态绑定，减少重复工作</li>
    </ul>
    <div>使用事件委托也是存在局限性：</div>
    <ul>
      <li>focus、blur这些事件没有事件冒泡机制，所以无法进行委托绑定事件</li>
      <li>mousemove、mouseout这样的事件，虽然有事件冒泡，但是只能不断通过位置去计算定位，对性能消耗高，因此也是不适合于事件委托的</li>
    </ul>
  </div>
</body>
</html>